<script setup lang="ts">
import PhoneCard from './PhoneCard.vue';
import type { ItemData } from "../../common/type/base";

const props = defineProps<{
    minTitle: String,
    dataList: ItemData[],
    bgSrc: String
}>()

function getImg() {
    return `url("${props.bgSrc}")`;
}
</script>
<template>
    <div class="activity-card" :style="{ backgroundImage: getImg() }">
        <div class="list">
            <div class="item" v-for="(item) in dataList" :key="item.id">
                <phone-card :price="item.min_price" trendTitle="首月1元" :imgPath="item.imgurl"
                    :maintitle="item.extension_title" :id="item.id" minTitle="首月1元" />
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.activity-card {
    height: 300px;
    height: 1118px;
    background-size: cover;
    padding-top: 114px;
    margin-bottom: 32px;

    .list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        .item {
            width: 220px;
            border-radius: 16px;
            background-color: white;
            margin-right: 15px;
            margin-bottom: 15px;
            overflow: hidden;

            &:nth-of-type(3n) {
                margin-right: 0;
            }
        }
    }
}
</style>